<template>
  <div class="app-container ">
    <FilterSearch class="filter-search" :value="queryParams" :config="configData">
    </FilterSearch>
    <div class="main">
      <div class="card">
        <el-card class="box-card" shadow="Never">
          <span class="item">
            静态资源目录: {{ bytesToMB(size) }}
          </span>
          <span class="item">
            <el-button type="warning" @click="removePic" round>一键删除失效图片</el-button>
          </span>
        </el-card>
      </div>
      <div class="table">
        <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange" height="650">
          <el-table-column type="selection" minWidth="55" align="center" />
          <el-table-column type="index" label="序号" minWidth="60">
            <template #default="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="fileName" label="文件名称" minWidth="120"></el-table-column>
          <el-table-column prop="fileType" label="文件类型" minWidth="120"></el-table-column>
          <el-table-column prop="date" label="文件日期" minWidth="180"></el-table-column>
          <el-table-column prop="src" label="文件预览" minWidth="120">
            <template #default="scope">
              <el-image :src="scope.row.src" v-if="scope.row.fileType == 'pic'" :preview-src-list="[scope.row.src]"
                fit="cover" style="width: 80px; height: 80px;" preview-teleported>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="size" label="文件大小" minWidth="120">
            <template #default="scope">
              {{ bytesToMB(scope.row.size) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" minWidth="160"
            class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button @click="handleRemove(scope.row)" type="text" icon="Delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup name="Resource" lang="ts">
import { getCurrentInstance, ComponentInternalInstance, ref, reactive, toRefs, nextTick, computed } from 'vue';
import { resourceList, resourceRemove, resourceRemovePic } from "@/api/system/resource";
import _ from "lodash";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;;
// 注入全局方法
const dataList = ref<any[]>([]);
const loading = ref<boolean>(false);
const total = ref<number>(0);
const size = ref<string>("");
const handleChecked = reactive({
  fileNames: [],
  multiple: true
});
const { fileNames, multiple } = toRefs(handleChecked);
const queryParams = ref({
  fileName: "",
  fileType: "",
  createTime: [],
});
const configData = computed(() => {
  let config = {
    itemConfig: [
      {
        type: "input",
        prop: "fileName",
        label: "文件名称",
        placeholder: "请输入"
      },
      {
        type: "select",
        prop: "fileType",
        label: "文件类型",
        placeholder: "请选择",
        optList: [
          { label: "图片", value: "pic" },
          { label: "表格", value: "xlsx" }
        ]
      },
      {
        type: "datetimerange",
        prop: "createTime",
        label: "创建时间",
        dateFormate: "YYYY-MM-DD HH:mm:ss",
        placeholder: "请选择"
      },
    ],
    operate: [
      {
        icon: "Search",
        type: "primary",
        name: "查询",
        handleClick: getLoad,
        rule: false,
      },
      {
        icon: "RefreshRight",
        type: "info",
        name: "重置",
        handleClick: reset,
        rule: false,
      },
      {
        icon: "Delete",
        type: "danger",
        name: "删除",
        handleClick: remove,
        rule: false,
        disabled: multiple.value
      }
    ],
    rules: {},
  };
  return config;
});

const bytesToMB = computed(() => {
  return (bytes: any) => {
    // 如果小于 1MB，转为 KB
    if (bytes < 1024 * 1024) {
      return `${_.divide(bytes, 1024).toFixed(2)} KB`;
    }
    // 大于等于 1MB，转为 MB
    return `${_.divide(bytes, 1024 * 1024).toFixed(2)} MB`;
  }
})
function getLoad() {
  loading.value = true;
  resourceList(queryParams.value).then(res => {
    dataList.value = res.data.rows;
    total.value = res.data.total;
    size.value = res.data.size;
    loading.value = false;
  });
};

function handleSelectionChange(selection: any) {
  fileNames.value = selection.map((item: any) => item.fileName);
  if (fileNames.value.length > 0) {
    multiple.value = false;
  } else {
    multiple.value = true;
  }
};
function handleRemove(row: any) {
  proxy.$modal.confirm('是否确认删除名称为"' + row.fileName + '"的数据项？').then(() => {
    resourceRemove([row.fileName]).then(res => {
      proxy.$modal.msgSuccess(res.data.msg);
      getLoad();
    })
  });
}
function remove() {
  proxy.$modal.confirm('是否确认删除名称为"' + fileNames.value + '"的数据项？').then(() => {
    resourceRemove(handleChecked.value.fileNames).then(res => {

      proxy.$modal.msgSuccess(res.msg);
      getLoad();
    })
  });
}
function removePic() {
  proxy.$modal.confirm('是否确认删除无效图片的数据？').then(() => {
    resourceRemovePic().then(res => {
      getLoad();
      proxy.$modal.msgSuccess(res.msg);
    })
  });
}
const reset = () => {
  queryParams.value = {
    fileName: "",
    fileType: "",
    createTime: [],
  }
  getLoad();
}

getLoad();
</script>
<style lang="scss" scoped>
:deep(.el-image) {
  margin-right: 5px;
  margin-bottom: 5px;
}

.main {
  .card {
    margin-bottom: 20px;

    .item {
      margin: 5px;
      font-size: 12px;
    }
  }
}
</style>